<template>
    <div class="sort-tree-comp" v-scrollBar>
        <draggable :list="list" v-bind="{forceFallback: true }">
            <div v-for="project in list" :key="project.nodeId">
                <div class="box">
                    <span class="icon" v-show="project.children"
                          :class="{'el-icon-minus':project.showChildren, 'el-icon-plus':!project.showChildren}"
                          @click="$emit('showChild', project, '2')"></span>
                    <span class="label"><el-link @click="$emit('initRightTable', project, '1')">{{project.label}}</el-link></span>
                </div>
                <draggable :list="project.children" v-bind="{forceFallback: true }" :group="{ name: 'building'}"
                           group="building" v-show="project.showChildren">
                    <div v-for="building in project.children" :key="building.nodeId">
                        <div class="box building">
                            <span class="icon" v-show="building.children" :class="{'el-icon-minus':building.showChildren, 'el-icon-plus':!building.showChildren}"
                                  @click="$emit('showChild', building, '3')"></span>
                            <span class="label"><el-link @click="$emit('initRightTable', building, '2')">{{building.label}}</el-link></span>
                        </div>
                        <draggable :list="building.children" v-bind="{forceFallback: true }" :group="{ name: 'floor'}"
                                   group="floor" v-show="building.showChildren">
                            <div v-for="floor in building.children" :key="floor.nodeId">
                                <div class="box floor">
                                    <span class="label"><el-link @click="$emit('initRightTable', floor, '3')">{{floor.label}} 层</el-link></span>
                                </div>
                            </div>
                        </draggable>
                    </div>
                </draggable>
            </div>
        </draggable>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        name: "project-tree",
        components: {
            draggable
        },
        props: {
            list: Array
        },
    }
</script>

<style scoped lang='scss'>


.sort-tree-comp {
    padding: 22px 16px;
    flex: 1;
    .box {
        display: flex;
        align-items: center;
        border: 1px solid $border-color;
        height: 38px;
        margin-bottom: 12px;
        padding-left: 16px;
        cursor: move;

        .icon {
            padding: 10px 16px;
            margin-left: -16px;
            cursor: pointer;
            transition: 0.3s ease;

            &:hover {
                font-weight: bold;
                color: $theme-color;
                transition: 0.3s ease;
                transform: scale(1.3);
            }
        }
    }

    .building {
        margin-left: 30px;
    }

    .floor {
        margin-left: 60px;
    }
}
</style>
